import React, {Component} from 'react';
import {Link, Route} from "react-router-dom";

import Detail from "./Detail/Detail";

class Message extends Component {

    state = {
        messageList: [
            {id: '101', title: 'message-one'},
            {id: '102', title: 'message-two'},
            {id: '103', title: 'message-three'}
        ]
    }

    replaceShow=(id,title) => {
        return () => {
            this.props.history.replace(`/home/message/detail/${id}/${title}`)
        }
    }

    pushShow = (id,title) => {
        return () => {
            this.props.history.push(`/home/message/detail/${id}/${title}`)
        }
    }

    goBack =() => {
        this.props.history.goBack()
    }

    goAhead = () => {
        this.props.history.goForward()
    }

    render() {
        const {messageList} = this.state
        return (
            <div>
                <ul>
                    {
                        messageList.map((obj) => {
                            return (
                                <li key={obj.id}>
                                    {/*向路由传递restful风格请求参数*/}
                                    <Link to={`/home/message/detail/${obj.id}/${obj.title}`}>{obj.title}</Link>
                                    <button className="btn btn-primary btn-sm" onClick={this.pushShow(obj.id, obj.title)}>push查看</button>
                                    <button className="btn btn-outline-success btn-sm"
                                            onClick={this.replaceShow(obj.id, obj.title)}>replace查看
                                    </button>

                                    {/*向路由组件传递search参数*/}
                                    {/*<Link to={`/home/message/detail/?id=${obj.id}&title=${obj.title}`}>{obj.title}</Link>*/}

                                    {/*向路由组件传递state参数 || 路径不会显示参数*/}
                                    {/*<Link to={{pathname:'/home/message/detail',state:{id:obj.id,title:obj.title}}}>{obj.title}</Link>*/}
                                </li>
                            )
                        })
                    }
                </ul>
                <hr/>
                {/*接收URL传递的参数restful*/}
                <Route path="/home/message/detail/:id/:title" component={Detail}/>

                {/*search参数不用声明接收*/}
                {/*<Route path="/home/message/detail" component={Detail}/>*/}

                {/*向路由组件传递state参数 和 search 一样 || 路径不会显示参数*/}
                {/*<Route path="/home/message/detail" component={Detail}/>*/}

                <button className="btn btn-primary btn-sm" onClick={this.goBack}>回退</button>
                <button className="btn btn-outline-success btn-sm"
                        onClick={this.goAhead}>前进
                </button>
            </div>
        );
    }
}

export default Message;